<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        body{
            margin: 0;
        }
        img{
            object-fit: contain
        }
        .sizeImg{
            margin-top: 50px;
        }
        #login{
            position: relative;
        }
        #login img{
            width: 100%;
            height: 100%;
        }
        #detail {
            margin: 10px;
        }
        .box{
            height: 500px;
            width: 500px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            line-height: 50px;
            padding: 23px;
            position: absolute;
            left: 30%;
            top: 20%;
        }
    </style>
    <script>
         if (!!window.ActiveXObject || "ActiveXObject" in window){
            window.opener = null;  
            window.open("", "_self");  
            window.close();  
        }else{
            // console.log(2);
        }
    </script>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/WangYuLue/image-conversion/build/conversion.js"></script>
       <div id="app" >
            <div id="login" v-show="isShow" >
                <!-- <img src="./img/login.jpg" alt=""> -->
                <div class="box">
                    <span>登录页面</span>
                    <div style="display: flex;justify-content: center;align-items: center;" v-loading="loading" element-loading-text="拼命加载中">
                        <el-input placeholder="请输入密码" v-model="passward"></el-input>
                        <el-button type="success" style="height: 40px;margin-left: 10px;" @click="btnLogin">登录</el-button>
                    </div>
                    <div style="margin-top: 220px;color:chocolate">version : 1.0.1 (暂仅支持电脑版并不支持ie浏览器)</div>
                </div>
            </div>
            <!-- <img src="http://n.sinaimg.cn/photo/transform/700/w1000h500/20201106/1ad8-kcpxnwv8925892.png" alt="">
            <img src="https://img.alicdn.com/imgextra/i2/54199406/O1CN012JLzreAxzn1xhNP_!!54199406.jpg" alt=""> -->
            <!-- https://www.mocky.io/v2/5185415ba171ea3a00704eed -->
            <!-- <img :src="item.url" alt="" v-for="item in fileList"> -->
            <div id="detail" v-show="!isShow">
                <div style="display: flex;justify-content: center;color: bisque;font-size: 32px;"><span>图片操作工具</span></div>
                <div class="exportImg">
                    <div>
                    <div>一、功能描述：</div>
                        <ul>
                            <li>1.可批量下载图片</li>
                            <li>2.可批量导出尺寸大小一样的图片</li>
                        </ul>
                    </div>
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-success="successUpload"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传图片</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                    </el-upload>
                    <!-- 批量下载图片 -->
                    <el-select v-model="sizeValue" placeholder="请选择导出图片尺寸大小" clearable @change="changeSize">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button style="margin-top: 20px;" type="success" onclick="packageImages()">下载<span id="status"></span></el-button>
                </div>
                <div class="sizeImg">
                    <div>二、功能描述：</div>
                        <ul>
                            <li>1.下载指定大小图片(以kb为单位)</li>
                        </ul>
                    </div>
                    <div style="margin-left: 20px;margin-bottom: 20px;">
                        <input type="number" id="btnUploadVal" placeholder="请输入截取图片大小">
                        <input id="demo" type="file" onchange="btnUploadLmg()">
                        <el-button id="compress">点击压缩图片</el-button>
                        <el-button id="download">点击下载图片</el-button>
                    </div>
                    <div style="margin-left: 20px;">
                        <a href="https://img-blog.csdnimg.cn/7090f2b46fc0476eb2bfb671f803fcac.jpg" id="downloadImg" download><img id="compressImg" src="https://img-blog.csdnimg.cn/7090f2b46fc0476eb2bfb671f803fcac.jpg" alt=""></a>
                    </div>
                </div>
            </div>
       </div>
    </body>
    <script type="text/javascript" src="./js/jszip.js"></script>
    <script type="text/javascript" src="./js/FileSaver.js"></script>
    <script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest/disable-devtool.min.js'></script>
    <script 
        disable-devtool-auto
        src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'
    ></script>
    
    <script>
        window.onload=function(){
            document.onkeydown=function(){
                var e=window.event||arguments[0];
                if(e.keyCode==123){
                    return false;
                }else if((e.ctrlKey)&&(e.shiftKey)&&(e.keyCode==73)){
                    return false;
                }
            };
            document.oncontextmenu=function(){
                return false;
            }
        }

        let size = ""
        let app = new Vue({
            el: '#app',
            data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                fileList: [{name: '晨锦工作室   你有需求找我们-详情内容: http://47.106.34.95:8081/dist/bishe_lunwen.html', url: 'https://img-blog.csdnimg.cn/7090f2b46fc0476eb2bfb671f803fcac.jpg'}],
                options: [{
                    value: '200',
                    label: '图片尺寸大小200 * 200'
                    }, {
                    value: '300',
                    label: '图片尺寸大小300 * 300'
                    }, {
                    value: '400',
                    label: '图片尺寸大小400 * 400'
                    }, {
                    value: '500',
                    label: '图片尺寸大小500 * 500'
                    },{
                    value: '请选择导出图片大小',
                    label: '不变'
                }],
                sizeValue:"",
                isShow:true,
                passward:"",
                loading:false
                };
            },
            methods: {
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePreview(file) {
                    console.log(file);
                },
                successUpload(res, file){
                    this.fileList.push({name:file.name,url:file.url})
                    console.log(res, file,'res, file');
                },
                changeSize(){
                    if(this.sizeValue == "请选择导出图片尺寸大小"){
                        size = ""
                    }else{
                        size = this.sizeValue
                    }
                },
                btnLogin(){ 
                    this.loading = true
                    setTimeout(()=>{
                        if(this.passward == 9911){
                            this.isShow = false
                            this.loading = false
                        }else{
                            this.$message({
                                message: '请输入正确密码',
                                type: 'warning'
                            });
                            this.loading = false
                        }
                    },3000)
                }
            }
        })
        let data
        function btnUploadLmg() {
            let size = document.getElementById("btnUploadVal").value
            if(!size || size <= 0){
                size = ""
            }
            const file = document.getElementById('demo').files[0];
            //200为kb
            console.log('压缩前=>',file)
            imageConversion.compressAccurately(file,size).then(res => {
                console.log('压缩后=>',res)
                var file = new File([res], 'filename', {
                    type: res.type,
                    lastModified: Date.now()
                });
                console.log('压缩=>',file)
                data = file
            })

        }
        document.querySelector('#compress').onclick = async function () {
            let size = document.getElementById("btnUploadVal").value
            if(!size || size <= 0){
                size = ""
            }
            document.querySelector('#compressImg').setAttribute('src', await imageConversion.filetoDataURL(data,size))
            document.querySelector('#downloadImg').setAttribute('href',await imageConversion.filetoDataURL(data,size))
            console.log(await imageConversion.filetoDataURL(data));
        }
        document.querySelector("#download").onclick = function(){
            document.getElementById("downloadImg").click();
            location.reload();
        }
        //批量下载
        function packageImages() {
            $('#status').text('处理中。。。。。');
            var imgs = $('img');
        
            var imgsSrc = [];
            var imgBase64 = [];
            var imageSuffix = [];//图片后缀
            var zip = new JSZip();
            // zip.file("readme.txt", "案件详情资料\n");
            var img = zip.folder("images");
        
            for (var i = 0; i < imgs.length; i++) {
                var src = imgs[i].getAttribute("src");
                var suffix = src.substring(src.lastIndexOf("."));
                imageSuffix.push(suffix);
        
                getBase64(imgs[i].getAttribute("src"))
                    .then(function (base64) {
                        imgBase64.push(base64.split(",")[1]);
        
                        //console.log(base64);//处理成功打印在控制台
                    }, function (err) {
                        console.log(err);//打印异常信息
                    });
        
            }
            function tt() {
                setTimeout(function () {
                    if (imgs.length == imgBase64.length) {
                        for (var i = 0; i < imgs.length; i++) {
                            img.file(i + imageSuffix[i], imgBase64[i], { base64: true });
                        }
                        zip.generateAsync({ type: "blob" }).then(function (content) {
                            // see FileSaver.js
                            saveAs(content, "images.zip");
                        });
                        $('#status').text('处理完成。。。。。');
        
                    } else {
                        //console.log('imgs.length:'+imgs.length+',imgBase64.length:'+imgBase64.length);
                        $('#status').text('已完成：' + imgBase64.length + '/' + imgs.length);
                        tt();
                    }
                }, 100);
        
            }
            tt();
        }
        //传入图片路径，返回base64
        function getBase64(img) {
            function getBase64Image(img, width, height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
                var canvas = document.createElement("canvas");
                canvas.width = width ? width : img.width;
                canvas.height = height ? height : img.height;
        
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                var dataURL = canvas.toDataURL();
                return dataURL;
            }
            var image = new Image();
            // image.setAttribute('crossOrigin', 'anonymous');
            // image.setAttribute('referrerpolicy', 'no-referrer'); // 不用带 referer 所有的防止外链的行为都会失效
            image.crossOrigin = 'Anonymous';
            image.src = img;
            var deferred = $.Deferred();
            if (img) {
                image.onload = function () {
                    console.log(size,'size');
                    deferred.resolve(getBase64Image(image,size,size));//将base64传给done上传处理
                }
                return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
            }
        }
    </script>
</html>
